<template>
  <f7-page class="qm-page">
    <qm-currentcy-navbar title="">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <f7-block class="qm-block">
      <f7-block-title class="qm-block-title">
        <div class="mobile-phone">忘记登录密码</div>
        <div class="project">填写信息重设密码</div>
      </f7-block-title>
      <!-- 手机号 -->
      <qm-field v-model="user" placeholder="请输入手机号" class="qmfield">
        <template #left-icon>
          <img src="static/img/land/index11/login_shoujihao.svg" alt="" />
        </template>
      </qm-field>
      <!-- 验证码 -->
      <qm-field v-model="user" placeholder="请输入验证码" class="qmfield">
        <template #left-icon>
          <img
            src="static/img/land/index11/login_yanzhengma.svg"
            alt=""
            class="iconimg"
          />
        </template>
        <template #button>
          <div class="rigth-button">
            <f7-button v-if="Verification" @click="sendMsg" outline round  class="yz-button"
              >获取验证码</f7-button
            >
            <f7-button v-else outline round disabled
              >{{ num }}重新获取</f7-button
            >
          </div>
        </template>
      </qm-field>
      <!-- 新密码 -->
      <qm-field v-model="user" placeholder="请设置新密码" class="qmfield">
        <template #left-icon>
          <img src="static/img/land/index11/login_mima.svg" alt="" />
        </template>
      </qm-field>
      <!-- 确定新密码 -->
      <qm-field v-model="user" placeholder="请确认新密码" class="qmfield">
        <template #left-icon>
          <img src="static/img/land/index11/login_querenmiam.svg" alt="" />
        </template>
      </qm-field>
      <!-- 按钮 -->
      <f7-button raised fill round class="qm-button">设置密码并登录</f7-button>
       <div class="footer">
        确认注册即代表已阅读并同意<f7-link>《软件服务协议》</f7-link>
      </div>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      password: "",
      showpassword: false,
      Verification: true,
      num: 60,
    };
  },
  computed: {
  },
  methods: {
    sendMsg() {
      this.Verification = false;
      let timer = setInterval(() => {
        this.num--;
        if (this.num <= 0) {
          this.Verification = true;
          clearInterval(timer);
          this.num = 60;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.qm-page {
  .qm-block {
    --f7-block-margin-vertical: calc(25px * var(--ratio));
    .qm-block-title {
      --f7-block-title-line-height: 36px;
      --f7-block-title-margin-bottom: calc(50px * var(--ratio));
      margin-left: calc(35px * var(--ratio));
      .mobile-phone {
        font-size: 24px;
        font-weight: 500;
        color: var(--color-text-title);
      }
      .project {
        font-size: 16px;
        color: var(--color-text-subtext);
      }
    }
    .qmfield {
      margin-bottom: calc(43px * var(--ratio));
      img {
        vertical-align: middle;
        width: calc(36px * var(--ratio));
        height: calc(36px * var(--ratio));
      }
      .iconimg {
        margin-top: 4px;
      }
      .rigth-button {
        border-radius: 50%;
        --f7-theme-color: #9ea7b781;
        --f7-button-height: 30px;
        .yz-button{
          color:#9EA7B7;
          font-weight: 400;
          font-size: 12px;
        }
      }
    }
    .qm-button {
      margin: calc(60px * var(--ratio)) 12px 0px;
      background-color: var(--color-brand);
      color: var(--color-text-base);
      font-size: var(--font-size-subtitle);
      --f7-button-raised-box-shadow: auto;
    }
    .footer {
      position: absolute;
      text-align: center;
      color: var(--color-text-subtext);
      font-size: 12px;
      left: 0px;
      right: 0px;
      margin-top: 210px;
    }
  }
}
</style>
